<template>
  <custom-modal-page :visible.sync="visible">
    <div class="beam-layout-container">
      <div class="screen-conditions-container">
        <ScreenConditions :isDataType="false">
          <template slot="conditions">
            <a-select placeholder="请选择设备" v-model="condition.equCode">
              <a-select-option
                :value="item.equCode"
                v-for="item in condition.equSource"
                :key="item.id"
              >
                {{ item.equName }}
              </a-select-option>
            </a-select>
            <a-range-picker
              :placeholder="['起始时间', '结束时间']"
              valueFormat="YYYY-MM-DD"
              format="YYYY-MM-DD"
              v-model="condition.defaultTime"
              @change="calendarOk"
            >
              <a-icon slot="suffixIcon" type="calendar" />
            </a-range-picker>
            <!-- :showTime="{ format: 'HH:mm:ss', hideDisabledOptions: false }" -->
            <a-radio-group
              v-model="condition.date"
              button-style="solid"
              @change="changeDate"
            >
              <a-radio-button value="b"> 日 </a-radio-button>
              <a-radio-button value="c"> 月 </a-radio-button>
              <a-radio-button value="d"> 年 </a-radio-button>
            </a-radio-group>
          </template>
          <template slot="operate">
            <a-button type="primary" @click="search()"> 查询 </a-button>
            <a-button class="back-button" @click="goBack()"> 返回 </a-button>
          </template>
        </ScreenConditions>
      </div>
      <div class="beam-table-container">
        <div class="table-header" header="历史记录"></div>
        <div class="main" v-loading="loading">
          <vxe-table
            ref="xTable"
            height="99%"
            class="scrollbarStyle"
            align="center"
            show-overflow
            show-header-overflow
            :data="tableData"
            :column-config="{ resizable: true }"
          >
            <vxe-column type="seq" width="80" title="序号"></vxe-column>
            <vxe-column title="整车左行">
              <template #default="{ row }">
                <div
                  :class="[
                    row.j71 == 'false'
                      ? 'error'
                      : row.j71 == 'true'
                      ? 'normal'
                      : 'cancel',
                    'status-text',
                  ]"
                >
                  {{
                    row.j71 == "false"
                      ? "未操作"
                      : row.j71 == "true"
                      ? "正在执行"
                      : "-"
                  }}
                </div>
              </template>
            </vxe-column>
            <vxe-column title="整车右行">
              <template #default="{ row }">
                <div
                  :class="[
                    row.j72 == 'false'
                      ? 'error'
                      : row.j72 == 'true'
                      ? 'normal'
                      : 'cancel',
                    'status-text',
                  ]"
                >
                  {{
                    row.j72 == "false"
                      ? "未操作"
                      : row.j72 == "true"
                      ? "正在执行"
                      : "-"
                  }}
                </div>
              </template>
            </vxe-column>
            <vxe-column title="前车前进">
              <template #default="{ row }">
                <div
                  :class="[
                    row.j73 == 'false'
                      ? 'error'
                      : row.j73 == 'true'
                      ? 'normal'
                      : 'cancel',
                    'status-text',
                  ]"
                >
                  {{
                    row.j73 == "false"
                      ? "未操作"
                      : row.j73 == "true"
                      ? "正在执行"
                      : "-"
                  }}
                </div>
              </template>
            </vxe-column>
            <vxe-column title="前车后退">
              <template #default="{ row }">
                <div
                  :class="[
                    row.j74 == 'false'
                      ? 'error'
                      : row.j74 == 'true'
                      ? 'normal'
                      : 'cancel',
                    'status-text',
                  ]"
                >
                  {{
                    row.j74 == "false"
                      ? "未操作"
                      : row.j74 == "true"
                      ? "正在执行"
                      : "-"
                  }}
                </div>
              </template>
            </vxe-column>
            <vxe-column title="后车前进">
              <template #default="{ row }">
                <div
                  :class="[
                    row.j75 == 'false'
                      ? 'error'
                      : row.j75 == 'true'
                      ? 'normal'
                      : 'cancel',
                    'status-text',
                  ]"
                >
                  {{
                    row.j75 == "false"
                      ? "未操作"
                      : row.j75 == "true"
                      ? "正在执行"
                      : "-"
                  }}
                </div>
              </template>
            </vxe-column>
            <vxe-column title="后车后退">
              <template #default="{ row }">
                <div
                  :class="[
                    row.j76 == 'false'
                      ? 'error'
                      : row.j76 == 'true'
                      ? 'normal'
                      : 'cancel',
                    'status-text',
                  ]"
                >
                  {{
                    row.j76 == "false"
                      ? "未操作"
                      : row.j76 == "true"
                      ? "正在执行"
                      : "-"
                  }}
                </div>
              </template>
            </vxe-column>
            <vxe-column title="时间">
              <template #default="{ row }">
                {{ row.updateTime }}
              </template>
            </vxe-column>
            <vxe-column
              field="operate"
              width="120"
              title="操作"
              fixed="right"
              align="left"
            >
              <template #default="{ row }">
                <div class="text-button-group">
                  <a-button type="link" @click="gotoDetail(row)">
                    查看
                  </a-button>
                </div>
              </template>
            </vxe-column>
          </vxe-table>
        </div>
        <div class="pager-container">
          <vxe-pager
            background
            :current-page.sync="pager.page"
            :page-size.sync="pager.pageSize"
            :total="pager.total"
            :layouts="[
              'PrevPage',
              'JumpNumber',
              'NextPage',
              'Sizes',
              'FullJump',
            ]"
            @page-change="paginationChange"
          >
            <template #left>
              <div class="vxe-pager-left-tip-container">
                第<span>1</span>到<span
                  >{{ Math.ceil(pager.total / pager.pageSize) || 1 }}页 </span
                >共<span>{{ pager.total }}</span
                >条记录
              </div>
            </template>
          </vxe-pager>
        </div>
      </div>
      <!-- 详情弹窗 -->
      <detailModal
        :visible.sync="detailModal.visible"
        :id="detailModal.id"
      ></detailModal>
    </div>
  </custom-modal-page>
</template>

<script>
import { getNowDateStr } from "@/utils";
import bjRangeCalendar from "@/components/bj-range-calendar";
import detailModal from "./detailModal.vue";
import {
  getLMDEquipment,
  getLMDHistory,
} from "@/api/wisdom-beam/collect-app.js";

export default {
  components: {
    bjRangeCalendar,
    detailModal,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    equCode: {
      type: String,
      default: "",
    },
  },
  watch: {
    visible: {
      handler(val) {
        this.$emit("update:visible", val);
        if (val) {
          this.getEquipmentData();
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      detailModal: {
        visible: false,
        id: "",
      },
      condition: {
        equSource: [],
        equCode: "",
        //时间
        defaultTime: [],
        date: "c",
      },
      loading: false,
      tableData: [],
      pager: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  methods: {
    gotoDetail(row = {}) {
      let { id } = row;
      this.detailModal.id = id;
      this.detailModal.visible = true;
    },
    //查询所有设备
    getEquipmentData() {
      return new Promise((resolve, reject) => {
        getLMDEquipment()
          .then((res) => {
            let { data } = res;
            this.condition.equSource = data?.result || [];
            resolve();
          })
          .catch((_) => {
            this.condition.equSource = [];
            reject();
          })
          .finally((_) => {
            this.condition.equCode = this.equCode;
            this.changeDate();
          });
      });
    },
    //查询列表
    getTableData() {
      this.loading = true;
      let { page, pageSize } = this.pager;
      let { equCode = "", defaultTime } = this.condition;
      getLMDHistory({
        equCode,
        status: "",
        startTime: defaultTime?.[0],
        endTime: defaultTime?.[1],
        page,
        pageSize,
      })
        .then((res) => {
          let { data } = res;
          this.tableData = data?.result?.rows || [];
          this.pager.total = data?.result?.total || 0;
        })
        .catch((err) => {
          this.tableData = [];
          this.pager.total = 0;
        })
        .finally((_) => {
          this.loading = false;
        });
    },
    //查询
    search() {
      this.pager.page = 1;
      this.getTableData();
    },
    //监听分页切换
    paginationChange({ currentPage, pageSize }) {
      this.pager.page = currentPage;
      this.pager.pageSize = pageSize;
      this.getTableData();
    },
    calendarOk(dates = []) {
      this.condition.defaultTime = dates;
      this.search();
    },

    changeDate() {
      let date = new Date();
      const YY = date.getFullYear();
      const MM =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      const DD = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      let start = "";
      let end = YY + "-" + MM + "-" + DD;
      if (this.condition.date == "b") {
        start = YY + "-" + MM + "-" + DD;
        this.condition.defaultTime = [start, end];
      }
      if (this.condition.date == "c") {
        start = YY + "-" + MM + "-" + "01";
        this.condition.defaultTime = [start, end];
      }
      if (this.condition.date == "d") {
        start = YY + "-" + "01" + "-" + "01";
        this.condition.defaultTime = [start, end];
      }
      this.search();
    },
    goBack() {
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style lang="less" scoped>
.table-header {
  padding: 28px 20px !important;
}
/deep/.ant-radio-button-wrapper {
  padding: 0 40px;
}
.back-button {
  color: var(--primary-color);
  background: #f1f2f7 !important;
  border: none;
  position: absolute;
  right: 20px;
}
.status-text {
  border-radius: 4px;
  color: #fff;
  .flex();
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  font-size: 12px;
  width: 80px;
  &.normal {
    background: #4bc964;
  }
  &.error {
    background: #ff3f4a;
  }
  &.cancel {
    background: #f1f2f7;
    color: #aab0bc;
  }
}
</style>
